<template>
    <div class="purchase-container">
      <div class="filter-section">
        <van-field
          v-model="value3"
          readonly
          label="申请日期"
          placeholder="请选择日期"
          @click="showDatePicker = true"
        >
          <template #right-icon>
            <van-icon name="arrow-down" />
          </template>
        </van-field>
  
        <van-dropdown-menu>
          <van-dropdown-item 
            v-model="value1" 
            :options="option1" 
            @change="handleStatusChange" 
          />
        </van-dropdown-menu>
      </div>
  
      <div class="list-section">
        <div 
          v-for="(item, index) in list" 
          :key="index"
          class="list-item"
          @click="goDetail(item.id)"
        >
          <div class="item-header">
            <span class="applicant">申请人：{{ item.applyUserName }}</span>
            <span 
              class="status"
              :style="{ color: getStatusColor(item.applyStatus) }"
            >
              {{ getStatusText(item.applyStatus) }}
            </span>
          </div>
          <div class="item-footer">
            <span class="date">{{ item.applyTime }}</span>
            <div class="amount">
              金额：<span>{{ item.amount }}</span>
            </div>
          </div>
        </div>
  
        <van-empty v-if="total === 0" description="暂无数据" />
        <van-loading v-if="isLoading" type="spinner" vertical>加载中...</van-loading>
        <div class="bottom-tip" v-if="list.length >= total && total > 0">
          已加载全部数据
        </div>
      </div>
  
      <div class="float-btn" @click="goApplyAdd">
        <img src="@/assets/images/jinhuo@2x.png" alt="新增">
      </div>
  
      <van-popup v-model="showDatePicker" position="bottom">
        <van-datetime-picker
          type="date"
          :value="currentDate"
          @confirm="onDateConfirm"
          @cancel="showDatePicker = false"
        />
      </van-popup>
    </div>
  </template>
  
  <script>
import { getPurchaseList } from "@/api/purchaseControl.js"
import { Toast } from 'vant'

export default {
  name: 'PurchaseControl',
  
  data() {
    return {
      value1: '',
      value3: '',
      showDatePicker: false,
      currentDate: new Date(),
      option1: [
        { text: '全部', value: '' },
        { text: '待审批', value: '1' },
        { text: '已撤回', value: '3' },
        { text: '待入库', value: '4' },
        { text: '已入库', value: '6' },
        { text: '已驳回', value: '5' }
      ],
      list: [],
      isLoading: false,
      total: 0,
      pageNum: 1,
      pageSize: 8
    }
  },

  created() {
    this.initData()
  },

  methods: {
    // 初始化数据
    initData() {
      this.pageNum = 1
      this.list = []
      this.getListData()
    },

    // 获取状态文字
    getStatusText(status) {
      const statusMap = {
        1: '待审批',
        3: '已撤回',
        4: '待入库',
        5: '已驳回',
        6: '已入库'
      }
      return statusMap[status] || ''
    },

    // 获取状态颜色
    getStatusColor(status) {
      const colorMap = {
        1: '#ff8832',
        3: '#909399',
        4: '#4498ff',
        5: '#ed5454',
        6: '#30d147'
      }
      return colorMap[status] || ''
    },

    // 获取列表数据
    getListData() {
      const params = {
        openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        applyBeginTime: this.value3,
        applyState: this.value1
      }
      
      getPurchaseList(params)
        .then(res => {
          if(res.code === 200) {
            // 直接使用 res 中的数据
            this.list = [...this.list, ...(res.rows || [])]
            this.total = res.total || 0
            this.isLoading = false
          } else {
            Toast.fail(res.message || '获取数据失败')
          }
        })
        .catch(err => {
          console.log(err);
          Toast.fail('加载失败')
          this.isLoading = false
        })
    },

    // 日期确认
    onDateConfirm(date) {
      this.value3 = this.$moment(date).format('YYYY-MM-DD')
      this.showDatePicker = false
      this.initData()
    },

    // 状态改变
    handleStatusChange() {
      this.initData()
    },

    // 跳转详情
    goDetail(id) {
        this.$router.push({
        path: '/purchaseControlDetail',
        query: {
          id: id
        }
      })
    },

    // 跳转新增
    goApplyAdd() {
      this.$router.push('/purchase')
    }
  }
}
</script>
  
  <style lang="scss" scoped>
  .purchase-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 40px;
  
    .filter-section {
      background: #fff;
      margin-bottom: 10px;
    }
  
    .list-section {
      padding: 0 15px;
  
      .list-item {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
  
        .item-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
  
          .applicant {
            font-size: 16px;
            font-weight: 500;
            color: #333;
          }
  
          .status {
            font-size: 14px;
          }
        }
  
        .item-footer {
          display: flex;
          justify-content: space-between;
          color: #666;
          font-size: 14px;
  
          .amount {
            span {
              color: #4086FF;
              font-weight: 500;
            }
          }
        }
      }
    }
  
    .float-btn {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 99;
  
      img {
        width: 60px;
        height: 60px;
      }
    }
  
    .bottom-tip {
      text-align: center;
      color: #999;
      padding: 10px 0;
    }
  }
  </style>